

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚光灯</title>
</head>
<body>
    <script src="./three.js"></script>
    <script>
        var clipPlane = [
            // 延yoz平面切割
            new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, 0, -1), 0),
        ];
        var scene = null;
        var camera = null;
        var renderer = null;
        var sphere = null;
        var light = null;
        var rectLight = null;
        // 初始化函数
        function init () {
            // 场景
            scene = new THREE.Scene();
            // 相机
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 1000);
            camera.position.z = 100;
            // camera.position.y = -50;
            // camera.position.y = -10;
            // 渲染器
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            // renderer.localClippingEnabled = true;
            // 渲染器是否允许投射阴影
            renderer.shadowMap.enabled = true;
            // 投射阴影类型
            // renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            // 所有的纹理和颜色都会预乘gamma
            // renderer.gammaInput = true;
            // 它期望所有纹理和颜色需要乘以gamma输出
            // renderer.gammaOutput = true;
            // renderer.setClearColor(0xffffff);
            document.body.appendChild(renderer.domElement);
            // 创建几何体
            sphere = createSphereGeometry(10, 0x00ffff);
            sphere.castShadow = true;
            scene.add(sphere);
            // 添加环境光
            var ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 ); // soft white light
            scene.add(ambientLight);
            // // 添加点光源
            // light = new THREE.PointLight(0xffffff, 1, 100 );
            // light.position.set( 50, 0, 0 );
            // // 给点光源的位置添加几何体
            var lightSphere = createSphereGeometry(1, 0xffffff);
            // 接受阴影的平面
            var plane = createPlaneGeometry(2000, 2000);
            // 设置平面的位置
            plane.position.y = -20;
            plane.rotation.x = Math.PI / 2;
            // 设置平面可以接收阴影
            plane.receiveShadow = true;
            scene.add(plane);
            // scene.add( light );
            // 添加聚光灯
            var spotLight = new THREE.SpotLight( 0xffffff, 1 );
            // 设置聚光灯的位置
            spotLight.position.set( 0, 40, 0);
            // 设置聚光灯光照强度渐变的区间
            // spotLight.distance = 200;
            spotLight.target = new THREE.Object3D();
            spotLight.target.position.set(0, 0, 0)
            scene.add(spotLight.target)
            // 生成阴影
            spotLight.castShadow = true;
            // 设置阴影的清晰度
            // spotLight.shadow.mapSize.width = 1024;
            // spotLight.shadow.mapSize.height = 1024;
            // 渲染物体背面的相机  物体背面均为阴影面,物体背后的物体将处于阴影中。
            // spotLight.shadow.camera.near = 1;
            // spotLight.shadow.camera.far = 100;
            // spotLight.shadow.camera.fov = 30;
            // spotLight.add(lightSphere);
            scene.add( spotLight );

            animate();
        }
        //    创建球体
        function createSphereGeometry(radius, color) {
            var sphere = new THREE.SphereBufferGeometry(radius, 30, 30);
            var material = new THREE.MeshStandardMaterial({
                color: new THREE.Color(color),
                side: THREE.DoubleSide,
                // dithering: true,
            });
            var sphere = new THREE.Mesh(sphere, material);
            return sphere;
        }
        function createPlaneGeometry(width, height) {
            // 创建平面几何体
            var geometry = new THREE.PlaneBufferGeometry( width, height);
            // 创建材质  展示双面（决定平面旋转的角度）
            var material = new THREE.MeshStandardMaterial( {side: THREE.DoubleSide, color: 0xffffff} );
            // 结合网格结构
            var plane = new THREE.Mesh( geometry, material );
            // var planeBack = new THREE.Mesh(geometry, materialBack);
            // plane.add(planeBack);
            return plane;
        }
        // var sphereGeometry = new THREE.SphereBufferGeometry(10, 30, 30);
        var deg = 0;
        // 动画效果
        function animate() {
            requestAnimationFrame(animate);
            deg += 1;
            // camera.position.z = camera.position.z % 100 + 50;
            // camera.position.x = camera.position.x % 
            // camera.rotation.y += 0.1;
            sphere.rotation.y += 0.1;
            // rectLight.position.set(20 * Math.cos(deg * Math.PI / 180), 0, 20 * Math.sin(deg * Math.PI / 180));
            // rectLight.lookAt(0, 0, 0);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            renderer.render(scene, camera);
        }
        
        init();
    </script>
</body>
</html>
